<template>
<el-container>
  <el-header class="header">
    <AdminHeader />
  </el-header>
  <el-container>
    <el-aside class="aside">
      <AdminSidebar />
    </el-aside>
    <el-container>
      <el-main class="main">
        <UiCard class="card">
        <slot></slot>
        </UiCard>
      </el-main>
      <el-footer class="footer">
        <a href="https://gitee.com/zhengyi59/xyblog">正义OvO 版权所有 © CopyRight Resolve</a>
      </el-footer>
    </el-container>
  </el-container>
</el-container>
</template>

<script setup>
import UiCard from "../../ui/UiCard.vue";
import AdminHeader from "./AdminHeader.vue";
import AdminSidebar from "./AdminSidebar.vue";
</script>

<style scoped>
.header {
  background-color: #fff;
  height: 60px;
  border-bottom: 1px solid #e2e2e2;
}

.aside {
  background-color: #ffff;
  height: calc(100vh - 60px);
}

.main {
  background-color: #f2f2f2;
}

.footer {
  background-color: #f2f2f2;
  color: #999999;
  font-size: 15px;
  line-height: 40px;
}

a {
  color: #999999;
  font-size: 15px;
  font-style: normal;
  text-decoration: none;
}
.card {
  width: calc(100% - 40px);
  height: calc(100vh - 200px);
  overflow: auto;
}
</style>